<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0  minimum-scale=1.0, maximum-scale=2.0" />
<meta name="MobileOptimized" content="240" />
<link rel="stylesheet" type="text/css" href="/mobile/css/base.css"/>
<script type="text/javascript" src="/common/js/zepto.js"></script>
<script type="text/javascript" src="/mobile/scripts/context.js" ></script>
<script type="text/javascript" src="/app/scripts/common_lib.js" ></script>
<title>品质从此无忧-麦丰网</title>
<style type="text/css">
*{ padding: 0; margin: 0;}

body {
	margin: 0;
	background:#f1f1f1;
	font-family:Helvetica,STHeiti STXihei,Microsoft JhengHei,Microsoft YaHei,Tohoma,Arial;
	text-align: center;
}

header,nav,section,footer{display:block;}
header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 999;background-color:#000;}
footer{ position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999;background-color:#000;}
.titleWrap{ position: relative; font-size: 18px; text-align: center;height: 45px; line-height: 45px; background: -webkit-gradient(linear,left top,left bottom,from(#353535),to(#2c2c2c)); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.6);-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.6);box-shadow: 0 1px 5px rgba(0,0,0,0.6); color: #fff;}
.footerWrap{ position: relative; font-size: 18px; text-align: center;height: 45px; line-height: 45px; background: -webkit-gradient(linear,left top,left bottom,from(#353535),to(#2c2c2c)); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.6);-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.6);box-shadow: 0 1px 5px rgba(0,0,0,0.6); color: #fff;}



.div-leader {
	width: 100%;
	max-width:330px;
	height: 25px;
	background-color: transparent;
	margin: 0 auto;
	/*
	left:50%;
	margin-left:-160px;
	position:fixed; 
	*/
}
.table-leader {
	width: 100%;
	text-align: center;
}

table td {
	text-align: center;
}

.menu1{color:#777;line-height:23px; width:12%;  padding:0px 2px; border-bottom:1px solid #CCC;  font-size:14px; }
.menu2{color:#ff3f40;line-height:23px;  width:12%; padding:0px 2px; border-bottom:1px solid #ff3f40; font-weight:bold; font-size:14px;}


.div-banner {
	width:330px;
	height: 195px;
	background-color: white;
	margin: 0 auto;
	margin-top: 5px;
	/*
	left:50%;
	margin-top: 30px;
	margin-left: -160px;
	position: fixed;
	*/
}

.div-content {
	width: 100%;
}
.div-product {
	width: 100%;
	max-width: 330px;
	height: 150px;
	background-color: white;
	margin: 0 auto;
	margin-top: 8px;
	text-align: left;
	font-size: 14px;
}

.div-image {
	width: 60%;
	height: 100%;
	float: left;
}

.div-name {
	width: 40%;
	height: 30%;
	float: right;
}

.p-name {
	color: #ff3f40;
	font-weight: bold;
	text-indent: 10px;
	padding-left: 6px;
	padding-right: 6px;
}
.p-description {
	text-indent: 10px;
	padding-left: 6px;
	padding-right: 6px;
}

.div-description {
	width: 40%;
	height: 60%;
	float: right;
}

.img-product {
	width: 100%;
	height: 100%;
}

.div-footer {
	width: 100%;
	max-width: 330px;
	height:100px;
	background-color: #CCC;
	top: 100%;
	margin: 0 auto;
	margin-top: 8px;
	margin-bottom: 50px;
}

.div-footer td {
	line-height: 30px;
	color:#333333; 
	border-right:1px #999 solid;
}

.div-bottom {
	width: 100%;
	height: 50px;
	top: 100%;
	margin-top: -50px;
	position: fixed;
}

#table-bottom { 
	width:100%; 
	height:35px;	
	line-height:35px; 
	background:#333;
	color: #CCC;
	bottom: 0px;
	position: fixed;
}

.div-loading {
	width:35px;
	height:35px;
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 5px;
	display: none;
}

.img-loading {
	width: 100%;
	height: 100%;
}



</style>
</head>
<body>
	<div class = "div-leader">
		<table class = "table-leader" id="leader" border="0" cellspacing="0" cellpadding="0">
		
		</table>
	</div>
	
	<!-- 
	<div class = "div-banner">
		<iframe src="/mobile/banner.html" id="banner" width="100%" height="100%" name="banner" scrolling="no" frameborder="0" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
	</div>
	 -->
	<div class = "div-content">
		<form id="form-product" >
			<input type="hidden" name = "category_id" id="input-category" value="0"/>
		</form>
	</div>
	<div class="div-loading"><img class = "img-loading" src="/mobile/images/loading3.gif" /></div>
	<div id="page_tag_bottom" style="display:none; width:100%; position:fixed; top:0px; background-color:#cccccc;height:100px;"></div>
	
	<div class = "div-footer">
		<iframe class = "iframe-view" src="/mobile/footer.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
	</div>
	
	<footer>
		<div class="footerWrap">
			<iframe src="/mobile/bottom.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
		</div>
	</footer>
	
	<div class = "div-bottom"  style="display: none">
		<iframe class = "iframe-view" src="/mobile/bottom.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
	</div>
	<div class = "div-footer" style="display: none">
	  <table width="100%" border="0" cellspacing="0" cellpadding="0">
	  	<tr>
	    	<td height="30" colspan="4" align="center"  style="background:url(/mobile/images/line_buttom.png) repeat-x; height:9px"></td>
	    </tr>
	    <tr>
		    <td width="25%" onclick="location.href='/'" height="35" align="center">首页</td>
		    <td width="25%" onclick="javascript:;" align="center">关于我们</td>
		    <td width="25%" onclick="javascript:;" align="center">友情链接</td>
		    <td width="25%" onclick="javascript:;" align="center">帮助</td>
	  	</tr>
		<tr>
		    <td style="font-size:10px; color:#666666" colspan="4" height="20px" align="center" valign="middle">&copy; 2014 KissBaby版权所有</td>
		</tr>
	  </table>
	</div>
	
	<div class = "div-bottom" style="display: none;">
		<table cellpadding="2" id="table-bottom">
			<tr>
		   	  <td width="33%" align="center" nowrap="nowrap" id="account" style="border-right:1px solid #000" onclick="location.href='/'"><img src="/mobile/images/s_home.png" style="margin-top:-3px" width="18" height="18" align="absmiddle" />更多优选</td>
		   	  <td width="33%" align="center" nowrap="nowrap" id="account" style="border-right:1px solid #000" onclick="goService()"><img src="/mobile/images/s_user.png" style="margin-top:-3px" width="18" height="18" align="absmiddle" /> 订单中心</td>
		   	  <td width="33%" align="center" nowrap="nowrap" id="account" style="border-right:1px solid #000" onclick="javascript:;"><img src="/mobile/images/s_car.png" style="margin-top:-3px" width="18" height="18" align="absmiddle" /> 购物车(0)</td>
		    </tr>
		</table>
	</div>
</body>
<script type="text/javascript">
	var page_size = 3;
	var page_no = 1;
	$(document).ready(function() {
		cjl.getTitle();
		var catagory = cjl.requestData("catagory");
		initPage(catagory);
	});
	
	function initPage(catagory) {
		var url = "/common/catagory";
		var params = '';
		cjl.get(url, params, function(body) {
			var list = body;
			var html = '<tr>';
			if(catagory == null || catagory == 0) {
				html += '<td class="menu2" onclick="toCatagory(0)">推荐</td>';
				$("#input-recommend").attr("checked",true)
			} else {
				html += '<td class="menu1" onclick="toCatagory(0)">推荐</td>';
			}
			for ( var o in list) {
				var common_bean = list[o];
				if(catagory == common_bean.id) {
					html += '<td class="menu2" onclick="toCatagory('+common_bean.id+')">'+common_bean.name+'</td>';
					$("#input-category").val(common_bean.id);
				} else {
					html += '<td class="menu1" onclick="toCatagory('+common_bean.id+')">'+common_bean.name+'</td>';
				}
			}
			html += '</tr>';
			
			$("#leader").html(html);
			
			$(".div-loading").show();
	        getProductByPage(catagory);
			
			$(window).scroll(function () {
				var $body = $("body");
				  var $html = "";
	              $html += "<br/>" + ($(window).height() + $(window).scrollTop());
	              $html += "<br/>window.height: " + $(window).height();
	              $html += "<br/>body.height: " + $body.height();
	              $html += "<br/>window.scrollTop: " + $(window).scrollTop();
	              $("#page_tag_bottom").html($html);
	             if (($(window).height() + $(window).scrollTop()) >= $body.height()) {
	            	 $(".div-loading").show();
	                 getProductByPage(catagory);
	                 
	             }
	         });
			
		});
	}
	
	function getProductByPage(catagory) {
		var $content = $('.div-content');
		var url = "/product/list";
		var params = $("#form-product").serialize();
		params += "&page_size="+page_size;
		params += "&page_no="+page_no;
		cjl.get(url, params, function(page) {
			$(".div-loading").hide();
			var totalCount = page.totalCount;
			var list = page.result;
			var pageCount = Math.ceil(totalCount / page_size);
			if(page_no > pageCount) {
				return;
			}
			page_no ++;
			for ( var o in list) {
				var product = list[o];
				var html = '';
				html += '<div class = "div-product" onclick="location.href=\'/mobile/product.html?product_id='+product.id+'\'">';
				html += '<div class = "div-image">';
				html += '<img class = "img-product" src='+product.image+' />';
				html += '</div>';
				html += '<div class = "div-name"><p class="p-name">'+product.name+'</p>';
				html += '<p class="p-description">'+product.description+'</p></div>';
				html += '</div>';
				
				$content.append(html);
			} 
		});
	}
	
	function toCatagory(id) {
		var url = window.location.href;
		var pos = url.indexOf("?");
		if(pos > 0) {
			url = url.substr(0, pos);
		}
		url += "?catagory="+id;
		location.replace(url);
	}
</script>
</html>